<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统人员</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>

<div class="layui-row">
    <div class="layui-panel layui-col-md9" style="padding: 8px;">
        <div class="">
            <table id="roleTable" lay-filter="roleTable"></table>
        </div>
    </div>
    <div class="layui-panel layui-col-md3" style="padding: 0px;">
        <div>
            <div class="layui-card" style="position: relative;">
                <div class="layui-card-header layui-bg-blue">
                    权限分配
                </div>
                <div class="layui-card-body" style="overflow-y: auto;height: 300px">
                    <div id="menuTree" class="layui-tree">
                        无数据，请点击选中左侧角色
                    </div>
                </div>
            </div>
            <div class="layui-bg-gray" style="bottom: 0px;background-color: #fff;padding-top: 10px;
	            	position: absolute;height: 50px;width: 100%;text-align: center;left: 0px;">
                    <a class="layui-btn layui-btn-normal layui-disabled" data-method="saveGrant">提交保存</a>
                <a class="layui-btn layui-btn-primary layui-disabled" data-method="clearCheck">清除选中</a>
            </div>
        </div>

    </div>
</div>
<script id="switchStatus" type="text/html">
    <input type="checkbox" name="status" lay-filter="checkStatus"
           readonly value="{{d.id}}" title="可用" {{d.status==0?"checked":""}} />
</script>
<script id="tableBar" type="text/html">
        <a class="layui-btn layui-btn-normal layui-btn-md" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </a>
    </c:if>
</script>


<script>
    var $,roleList=[],tree,rid;
    layui.use(['table','form','layer','jquery','tree'],function(){
        var table = layui.table,form = layui.form,
            layer = layui.layer;
        tree = layui.tree;
        $ = layui.jquery;
        setHeight();

        table.render({
            id:'roleTable',
            elem:'#roleTable',
            height:'full-50',
            page: {
                theme:'#1e9fff'
            },
            url:'/system/role/find',
            toolbar:'#tableBar',
            where:{
                status:0
            },
            cols:[
                [
                {type:'numbers',fixed:'left'},
                {type:'radio',fixed:'left'},
                {field:'name',title:'角色名称',width:200,edit:'text'},
                {field:'content',title:'角色描述',edit:'text'},
                {field:'status',title:'是否可用',width:150,templet:'#switchStatus',unresize:true},
                {field:'createTime',title:'创建时间',width:200},
            ]
            ]
        });

        table.on('toolbar(roleTable)',function (obj) {
            let event = obj.event;
            if('add' == event){

                var b = false;
                top.layer.open({
                    type:2,
                    content:'/page/system/roleAdd',
                    area:['500px','350px'],
                    btn:['确定保存','取消关闭'],
                    btn1:function (i,o) {
                        b = true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                    },
                    end:function () {
                        if(b) table.reload('roleTable');
                    }
                })
            }
        })
        table.on('edit(roleTable)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            var dataForm = {};
            if("name"==field) dataForm = {"id":data.id,"name":value}
            else if("name"==field) dataForm = {"id":data.id,"content":value}
            $.ajax({
                type:'post',
                url:'/system/role/update',
                data:dataForm,
                dataType:'json',
                success:function (res) {

                }
            })
        });
        //form表单switch
        form.on('checkbox(checkStatus)',function (obj) {
            var state = obj.elem.checked?0:1;
            $.ajax({
                type:'post',
                url:'/system/role/update',
                data:{
                    id:this.value,
                    status:state
                },
                dataType:'json',
                success:function (result) {

                }
            })
        })
        table.on('radio(roleTable)',function (obj) {
            rid = obj.data.id;
            //getMenuJson();
            $('.layui-disabled').removeClass('layui-disabled');
        })


        let active = {
            dialog:function (title,id) {
                id = '?id='+(id==""?0:id);
                layer.open({
                    type:2,
                    content:'/system/addRole',
                    title:title,
                    area:['500px','350px'],
                    btn:['确定保存','取消关闭'],
                    btn1:function (i,o) {
                        let wf = window[o.find('iframe')[0]['name']];
                        wf.btnSubmit();
                    }
                });
            },
            saveGrant:function (othis) {
                //获取树复选框的选中
                var cds = tree.getChecked('menuTree');
                var mids = [];
                $.each(cds,function (i,cd) {
                    //把获取的id存放到数组
                    mids.push(cd.id);
                    $.each(cd.children,function (j,c) {
                        mids.push(c.id);
                        $.each(c.children,function (j,a) {
                            mids.push(a.id);
                        });
                    });
                });
                //toGrant(mids);
            },
            clearCheck:function (othis) {
                //利用重新加载作为清除选中
                tree.reload('menuTree',{});
            }
        }

        $(".layui-bg-gray .layui-btn").on('click',function () {
            var o = $(this),method = o.data('method');
            active[method].call(this,o);
        })
    });



    function toGrant(mids){
        $.ajax({
            type:'post',
            url:'${ssm}/system/rc/grant',
            data:{
                mids:mids,
                rid:rid
            },
            dataType:'json',
            success:function (result) {
                var str = result.msg;
                layer.msg(str);
            }

        })
    }

    function getMenuJson() {
        $.ajax({
            type:'post',
            url:'/system/ec/getMenuJson',
            dataType:'json',
            success:function (result) {
                //加载树
                tree.render({
                    elem: '#menuTree',
                    data: result,
                    showCheckbox:true,
                    id:'menuTree'
                })
                setTimeout(function () {
                    getRoleMenuId();
                },10)

            }
        })
    }
    //获取角色对应的菜单id
    function getRoleMenuId() {
        $.ajax({
            type:'get',
            url:'/system/rc/getRoleMenuId/'+rid,
            dataType:'json',
            success:function (result) {
                //给树的节点打上勾
                tree.setChecked('menuTree',result);
            }
        });
    }

    //获取页面高度
    function setHeight(){
        var height = window.outerHeight-250;
        $('.layui-panel').css('height',height);
        height = window.outerHeight-375;
        $('.layui-card-body').css('height',height);
    }
</script>
</body>
</html>
